<template>
  <Row>
    <Col span="24">
    <Card :bordered="true" :dis-hover="false" :padding="8">
      <!--表格-->
      <p slot="title" style="height:38px;">
        <Button-group>
          <!--<Button type="ghost" size="large" icon="plus-round"></Button>
          <Button type="ghost" size="large" icon="edit" @click="updateUser">修改</Button>-->
          <Button type="ghost" size="large" icon="trash-b" @click="deleteUser" v-if="!userQuery.deleted">删除</Button>
          <Button type="ghost" size="large" icon="hammer" @click="recoveryUser" v-if="userQuery.deleted">恢复</Button>
        </Button-group>
        <Select v-model="userQuery.deleted" style="width:200px;margin-left: 10px;" @on-change="findUser">
          <Option v-for="item in deletedState" :value="item.value" :key="item.value+item.label">{{ item.label }}</Option>
        </Select>
        <Input v-model="userQuery.text" @on-enter="searchText" placeholder="查询..." style="max-width: 600px;float: right;">
        <Button slot="append" icon="ios-search" @click="searchText"></Button>
        </Input>
      </p>
      <!--表格-->
      <Table @on-selection-change="selectTable" border :columns="table_show" :data="table_data"></Table>
      <!--分页-->
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :current="userQuery.page" @on-change='changePage' :total="userQuery.total" simple></Page>
        </div>
      </div>
    </Card>
    </Col>
  </Row>
</template>

<script>
  import userApi from '@/api/userApi'
  import roleApi from '@/api/roleApi'

  export default {
    data() {
      return {
        action: '',
        allRoles: [],
        deletedState: [{
            value: 0,
            label: '未删除'
          },
          {
            value: 1,
            label: '已删除'
          }
        ],
        gam_table: [{
            title: '微信',
            key: 'wx'
          },
          {
            title: '微博',
            key: 'wb'
          },
          {
            title: 'qq',
            key: 'qq'
          }
        ],
        gams: [],
        table_show: [{
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '编号',
            width: 80,
            key: 'id',
            align: 'center'
          },
          {
            title: '头像',
            width: 80,
            align: 'center',
            render: (h, params) => {
              if(params.row.photo && params.row.photo.path && params.row.photo.path != '') {
                return h('Avatar', {
                  props: {
                    src: 'http://127.0.0.1:3000'+params.row.photo.path,
                    size: 'small'
                  }
                })
              } else {
                return h('Avatar', {
                  props: {
                    icon: 'person',
                    size: 'small'
                  }
                })
              }
            }
          },
          {
            title: '用户名',
            width: 160,
            align: 'center',
            key: 'user_name'
          },
          {
            title: '创建日期',
            width: 200,
            align: 'center',
            key: 'created'
          },
          {
            title: '真实姓名',
            width: 200,
            align: 'center',
            key: 'real_name'
          },
          {
            title: '部门',
            align: 'center',
            key: 'department'
          },
          {
            title: '角色',
            width: 200,
            align: 'center',
            key: 'role_name'
          },
          {
            title: '微信信息',
            width: 190,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    shape: 'circle',
                    type: 'ghost',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '查看详情')
              ]);
            }
          },
          {
            title: '操作',
            width: 190,
            align: 'center',
            render: (h, params) => {
              var vm = this
              if(params.index !== vm.action) {
                return h('div', [
                  h('Button', {
                    props: {
                      shape: 'circle',
                      type: 'ghost',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        vm.action = params.index
                        vm.setRoleForm.userId = params.row.id
                      }
                    }
                  }, '分配角色')
                ]);
              } else {
                var array = []
                for(var i = 0; i < this.allRoles.length; i++) {
                  array.push(h('Option', {
                    props: {
                      value: this.allRoles[i].id,
                      key: this.allRoles[i].id,
                      label: this.allRoles[i].role_name
                    }
                  }))
                }
                return h('div', [
                  h('Select', {
                    props: {
                      style: 'width:100px',
                      placeholder: '请分配角色',
                      value: vm.setRoleForm.roleId,
                      clearable: true
                    },
                    on: {
                      input: (val) => {
                        if(val == '') {
                          vm.action = ''
                          vm.setRoleForm.userId = ''
                          vm.setRoleForm.roleId = ''
                        } else {
                          vm.setRoleForm.roleId = val
                          var msg = this.$Message.loading({
                            content: '正在设置中...',
                            duration: 0
                          })
                          userApi.setRole(vm.setRoleForm).then((data) => {
                            vm.findUser()
                            this.$Message.destroy()
                          }).catch((errMsg) => {
                            this.$Message.destroy()
                          })
                        }
                      }
                    }
                  }, array)
                ]);
              }
            }
          }
        ],
        table_data: [],
        on_select: [],
        userQuery: {
          text: '',
          deleted: 0,
          page: 1,
          size: 10,
          total: 0
        },
        setRoleForm: {
          userId: '',
          roleId: ''
        }
      }
    },
    methods: {
      getAllRoles() {
        roleApi.allRoles().then((data) => {
          this.allRoles = data
        }).catch((errMsg) => {
          this.$Message.error(errMsg)
        })
      },
      show(index) {
        this.gams = []
        this.gams.push(this.table_data[index])
        console.log(this.gams)
        this.$Modal.info({
          title: '',
          width: 650,
          render: (h) => {
            return h('Table', {
              props: {
                columns: this.gam_table,
                data: this.gams
              }
            })
          },
          okText: '关闭'
        })
      },
      updateUser() {
        var vm = this
        if(vm.on_select.length != 1) {
          this.$Message.error('请选择1项进行操作！')
          return
        }
        vm.userForm.id = vm.on_select[0].id;
        vm.userForm.userName = vm.on_select[0].user_name;
        vm.doing = '修改用户';
      },
      selectTable(selection) {
        this.on_select = selection
      },
      changePage(index) {
        this.userQuery.page = index
        this.findUser()
      },
      searchText() {
        this.findUser()
      },
      findUser() {
        var vm = this
        userApi.findUser(this.userQuery).then((data) => {
          vm.table_data = data.list
          vm.userQuery.total = data.totalRow
        }).catch((errMsg) => {
          this.$Message.error(errMsg)
        })
      },
      deleteUser() {
        var vm = this
        if(vm.on_select.length < 1) {
          this.$Message.error('至少选择1项进行操作！')
          return
        }
        var ids = []
        for(var i = 0; i < vm.on_select.length; i++) {
          ids.push(vm.on_select[i].id)
        }
        this.$Modal.confirm({
          title: '系统提示',
          content: '<p>确认删除<br> ' +
            '编号为<font style="color:red">' + (ids.join(',')) + '</font>的元素么',
          onOk: () => {
            var msg = this.$Message.loading({
              content: '正在删除中...',
              duration: 0
            })
            userApi.deleteUser(ids.join(',')).then((data) => {
              vm.findUser()

              vm.userForm.id = ''
              this.$Message.destroy()
            }).catch((errMsg) => {
              if(errMsg && errMsg !== '') {
                console.log(errMsg)
                this.$Notice.error({
                  title: errMsg,
                  duration: 1
                });
              }
              this.$Message.destroy()
            })
          },
          onCancel: () => {}
        });
      },
      recoveryUser() {
        var vm = this
        if(vm.on_select.length < 1) {
          this.$Message.error('至少选择1项进行操作！')
          return
        }
        var ids = []
        for(var i = 0; i < vm.on_select.length; i++) {
          ids.push(vm.on_select[i].id)
        }
        this.$Modal.confirm({
          title: '系统提示',
          content: '<p>确认恢复<br> ' +
            '编号为<font style="color:red">' + (ids.join(',')) + '</font>的元素么',
          onOk: () => {
            var msg = this.$Message.loading({
              content: '正在恢复中...',
              duration: 0
            })
            userApi.recoveryUser(ids.join(',')).then((data) => {
              vm.findUser()
              vm.userForm.id = ''
              this.$Message.destroy()
            }).catch((errMsg) => {
              if(errMsg && errMsg !== '') {
                console.log(errMsg)
                this.$Notice.error({
                  title: errMsg,
                  duration: 1
                });
              }
              this.$Message.destroy()
            })
          },
          onCancel: () => {}
        });
      }
    },
    mounted() {
      this.findUser()

      this.getAllRoles()
    },
    watch: {}
  }
</script>

<style>

</style>